<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../../jQuery-JS/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function(){
            var $ul=$("ul");
            var $ul_li_all=$("ul>li");
            //选择li代理click事件，触发function(){}
            $ul.delegate("li","click",function(){
                this.style.backgroundColor="red";
            })

            //给btn1绑定单击事件
            var $button_btn1=$(":button#btn1");
            $button_btn1.click(function(){
                $ul.append("<li>新增li</li>");
            })

            //移除ul上的事件委托
            var $button_btn2=$(":button#btn2");
            $button_btn2.click(function(){
                $ul.undelegate("click");
            })

            //事件委托可以自动委托给新元素，此方法可以用来优化之前添加删除练习
        })
    </script>
</head>
<body>
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
    </ul>

    <li>22222</li>
    <br>
    <button id="btn1">添加新的li</button>
    <button id="btn2">删除ul上的事件委托的监听器</button>

    <!--
        1. 事件委托:
        * 将多个子元素(li)的事件监听委托给父辈元素(ul)处理
        * 监听回调是加在了父辈元素上
        * 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
        * 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
        2. 事件委托的2方:
        * 委托方: 业主  li
        * 被委托方: 中介  ul
        3. 使用事件委托的好处
        * 添加新的子元素, 自动有事件响应处理
        * 减少事件监听的数量: n==>1
        4. jQuery的事件委托API
        * 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
        * 移除事件委托: $(parentSelector).undelegate(eventName)
-->
</body>
</html>